<template>
  <div class="v-editor-checkbox g-pd-l-8">
    <el-checkbox
      v-model="checked"
      :label="$t(label)"
      size="small"
      :indeterminate="indeterminate"
      :disabled="props.row.readonly || isModelDisabled"
      @change="handleChange"
    ></el-checkbox>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed, watch, inject, Ref } from "vue";
import { propertyUtil } from "../../PropertyUtil";
import { PropertyRow } from "../../types";

const isModelDisabled = inject("isModelDisabled") as Ref<boolean>;

const map = new Map([
  [true, "是"],
  [false, "否"],
  [null, "空"]
]);

const props = defineProps<{
  row: PropertyRow;
  selected?: boolean;
}>();

const checked = ref(props.row.value as boolean);

const label = computed(() => {
  return map.get(checked.value) || "空";
});
const indeterminate = computed(() => {
  return props.row.value === null;
});

watch(
  () => props.row.value,
  () => {
    checked.value = props.row.value as boolean;
  }
);

async function handleChange(value: boolean) {
  await propertyUtil.updatePropertyAndFresh(props.row, value);
}
</script>
